<template>
  <div>
    <a-row>
      <a-col v-for="(item, index) in propsData" :key="index" :span="4">
        <chart-card :title="`${item.name}(㎡)`">
          <vue-count-up slot="total" :start-value="0" :end-value="item.value" style="color: rgba(109, 210, 48, 1)" />
        </chart-card>
      </a-col>
    </a-row>
    <echarts-view :options="option"></echarts-view>
  </div>
</template>

<script>
import {
  ChartCard
} from '@/components'
import echartsView from '@/components/ECharts'
import VueCountUp from 'vue-countupjs'
export default {
  props: {
    propsData: {
      type: Array,
      default: () => []
    }
  },
  components: {
    echartsView,
    ChartCard,
    VueCountUp
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        color: [
          'rgba(84, 112, 198, 1)',
          'rgba(115, 192, 222, 1)',
          'rgba(238, 102, 102, 1)',
          'rgba(250, 200, 88, 1)'
        ],
        legend: {
          orient: 'vertical',
          top: 'center',
          right: '100',
          textStyle: {
            color: '#333'
          }
        },
        series: [
          {
            type: 'pie',
            radius: [50, 100],
            center: ['30%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            data: this.propsData
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 6px!important;
}
  /deep/.chart-card-content {
    height: 0;
  }
  /deep/.chart-card-footer {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  /deep/ .total {
      font-size: 18px;
    }
</style>
